/*
 * @Description: 自定义数值的千分位显示
 * @Date: 2023-11-10 17:25:55
 * @FilePath: \hksj-vued:\03code\hk-purchase-system\src\directive\thousands.ts
 */
import type { App } from 'vue';

/**
 * 自定义数值的千分位显示
 * @directive （v-thousands="xxx"）
 */
export function thousands(app: App) {
  app.directive('thousands', {
    mounted(el, binding) {
      // 获取绑定的值
      let value = binding.value;
      // 格式化为千分位显示
      let formattedValue = parseFloat(value).toLocaleString('en-US');
      // 将格式化的值显示到页面
      el.textContent = formattedValue;

      // el.addEventListener('input', function (event) {
      //   debugger
      //   let value = event.target.value.replace(/,/g, '');
      //   debugger
      //   // 添加千分号
      //   event.target.value = parseFloat(value).toLocaleString('en-US');
      // });
      debugger
      // // 获取input节点
      // if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
      //   el = el.getElementsByTagName('input')[0]
      // }

      // // 初始化时，格式化值为千分位
      // const numberValue = parseFloat(el.value.replace(/,/g, ''))
      // if (!isNaN(numberValue)) {
      //   el.value = numberValue.toLocaleString('zh', {
      //     minimumFractionDigits: 2,
      //     maximumFractionDigits: 2,
      //   })
      // }

      // // 聚焦时转化为数字格式（去除千分位）
      // el.onfocus = () => {
      //   el.value = parseFloat(el.value.replace(/,/g, '')).toFixed(2)
      // }

      // // 失去焦点时转化为千分位
      // el.onblur = () => {
      //   const onBlurValue = parseFloat(el.value.replace(/,/g, ''))
      //   if (!isNaN(onBlurValue)) {
      //     el.value = onBlurValue.toLocaleString('zh', {
      //       minimumFractionDigits: 2,
      //       maximumFractionDigits: 2,
      //     })
      //   }
      // }
    },
  });
}